<script>
export default {
  name: "total component",
  // 注入在根组件上提供的数据
  inject: [ 'items' ],
  computed: {
    totalPrice() {
      let total = this.items.reduce( (prev, curr) => prev + curr.price * curr.amount, 0);
      return `${total.toFixed(2)}`;
    }
  },
  beforeCreate() {
    console.log( 'total component: before create', this.items );
  },
  created() {
    console.log( 'total component: created', this.items );
  }
};
</script>

<template>
  <el-row class="total-wrapper" align="middle">
    <el-col :span="3" :offset="18" class="total-price">{{ totalPrice }}</el-col>
  </el-row>
</template>

<style lang="less">
@height: 40px;
.total-wrapper {
  height: @height;
  margin: 10px;
}

.total-wrapper>.total-price {
  text-align: center;
}
</style>